<template>
  <div class="content">
    <!-- <header>
      <div>
        <span class="h-text">赛事名称：</span>
        <span class="fontBold">xxx2018超级联赛</span>
      </div>
      <div>
        <span class="h-text">裁判长：</span>
        <span>张三</span>
      </div>
    </header> -->
     <div class="basicInfo">
      <div style="flex: 1.5;">
        <span>
          赛事名称：
          <b>网球测试赛</b>
        </span>
        <span>
          裁判长：
          <b>庄裕东</b>
        </span>
      </div>
      <div style="flex: 2;display: flex;justify-content: flex-end;align-items: baseline;">
        <div class="btnGroup" style="display: flex;">
          <el-upload
            class="upload-demo"
            action="string"
            :show-file-list="false"
            :http-request="uploadExcel"
          >
            <el-button type="danger" size="small" v-loading="Imploading">导入报名信息</el-button>
          </el-upload>
          <el-upload
            class="upload-demo"
            action="string"
            :show-file-list="false"
            :http-request="team_uploadExcel"
          >
            <el-button
              type="danger"
              size="small"
              style="margin-left: 10px;"
              v-loading="team_Imploading"
            >导入团体报名信息</el-button>
          </el-upload>
          <a style="margin-left: 10px;" :href="ApplyUrl" download="报名信息">
            <el-button type="primary" size="small" @click="opens" v-loading="loading">导出报名信息</el-button>
          </a>
          <a style="margin-left: 10px;" :href="SignUrl" download="签到信息">
            <el-button type="primary" size="small">导出签到信息</el-button>
          </a>
        </div>
      </div>
    </div>

     <div class="table">
      <el-table :data="tableData" stripe style="width: 100%;" border>
        <el-table-column prop="name" label="姓名" width="90"></el-table-column>
        
        <el-table-column prop="project" label="项目-组别" width="200">
        </el-table-column>
        <el-table-column prop="idNum" label="身份证号" width="200"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="90"> </el-table-column>
        <el-table-column prop="phone" label="手机号" width="150"> </el-table-column>
        <el-table-column prop="company" label="单位"> </el-table-column>
         <el-table-column prop="money" label="金额"> </el-table-column>
       <el-table-column prop="time" label="报名时间" width="150"> </el-table-column>
        <el-table-column prop="option" label="操作" width="150"> 
           <template slot-scope="scope">
              <!-- <p :style="{color:'blue',cursor: 'pointer'}">{{scope.row.option}}</p> -->
              <p :style="{color:'blue',cursor: 'pointer'}">
                  <span>修改 |</span>
                  <span>退款</span>
              </p>
           </template>
          
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top:100px;text-align:center">
         <el-button @click="toBack">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "张三",
          project: "青年组男单",
          competitionName: "第三届‘LELOON’ITN分级赛",
          idNum:'320100197705061234',
          sex:'男',
          phone:'15888888888',
          company:'湖北省',
          money:200,
          time:'2018-10-10 09:00',
          option:'移除'
        },
        {
          name: "张三",
          project: "青年组男单",
          competitionName: "2018‘东风杯’挑战赛",
          idNum:'320100197705061234',
          sex:'女',
          phone:'15888888888',
          company:'湖北省',
          money:200,
          time:'2018-10-10 09:00',
          option:'移除'
        },
        {
          name: "张三",
          project: "青年组男单",
          competitionName: "2018‘招商银行’职工联赛",
          idNum:'320100197705061234',
          sex:'男',
          phone:'15888888888',
          company:'湖北省',
          money:200,
          time:'2018-10-10 09:00',
          option:'移除'
        },
       
      ],
    };
  },
  methods:{
      toBack(){
          this.$router.go(-1)
      }
  }
};
</script>

<style lang="less" scoped>
.content {
  width: 90%;
  height: 100%;
  padding-left: 46px;
  padding-top: 36px;
  box-sizing: border-box;
  header {
    display: flex;
    width: 50%;
    justify-content: space-between;
    .fontBold {
      font-weight: bold;
    }
    .h-text::before {
      content: "*";
      font-size: 22px;
      color: red;
      position: relative;
      top: 8px;
    }
  }
  .table {
    margin-top: 50px;
  }
}

.basicInfo {
  background: linear-gradient(
    90deg,
    rgba(66, 185, 131, 0.2),
    rgba(66, 185, 131, 0.4)
  );
  border-radius: 2px;
  line-height: 30px;
  height: 30px;
  padding: 15px;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;

  span {
    margin-right: 20px;
  }

  .btnGroup {
    /*height: 60px;*/
    /*float: right;*/
    margin-right: 20px;
  }

  .date {
    width: 25%;
    padding: 10px 15px;
  }
}
</style>